<template>
  <div class="personnelList">
    <el-breadcrumb separator="/" class="ml_5">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-tangxueyuan fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>灵工学院</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow mt_15">
      <div class="py_5 px_10">
        <el-row>
          <el-col :span="4">
            <el-button
              type="success"
              class="fl mb_10"
              @click="$router.push({ path: '/typeAdd' })"
              round
              size="mini"
              >新增分类</el-button
            >
          </el-col>
          <el-col :span="20"> </el-col>
        </el-row>
      </div>
      <div class="tableMaxBox">
        <template>
          <el-table :data="shopList" stripe>
            <el-table-column prop="id" label="序号" align="center" width="50px">
              <template slot-scope="{ row, $index }">
                <span>{{ $index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="cover_image" label="封面图片" align="center">
              <template slot-scope="{ row, $index }">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="head_url + row.cover_image"
                  fit="scale-down"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="应用" align="center">
              <template slot-scope="{ row, $index }">
                {{ channelList[row.channel] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="分类"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="sort"
              label="排序"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="creater_name"
              label="发布人"
            ></el-table-column>
            <el-table-column prop="add_time" label="发布时间"></el-table-column>

            <el-table-column label="操作" width="100px" fixed="right">
              <template slot-scope="{ row, $index }">
                <el-link
                  type="primary"
                  class="InfoFont text-success"
                  :underline="false"
                  @click="
                    $router.push({ path: '/typeEdit', query: { sn: row.sn } })
                  "
                  >查看</el-link
                >
                <el-link
                  type="danger"
                  class="InfoFont text-success"
                  :underline="false"
                  @click="redactBtn(row, $index)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <page
            :total="total"
            :pageNums="pageNum"
            @pagedata="onChildValue"
          ></page>
        </template>
      </div>
    </div>
    <!-- 删除 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="StateShowStop"
      width="560px"
      :close-on-click-modal="false"
      :before-close="hiddenRY"
    >
      <div class="auditCentent">
        <span>确认删除吗？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addMenuBtn()">确 定</span>
        <span class="resetBtn" @click="hiddenRY">取 消</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var common = require('../../../static/tool.js')
import { appChannelGetlist } from '@/api/banner.js'

export default {
  name: 'HelpList',
  data() {
    return {
      ids: '',
      url: common.url,
      head_url: common.head_url,
      shopList: [], //店铺列表
      StateShowStop: false, //列表删除
      diaTitle: '', //title
      //向分页组件传值
      total: 0,
      pageNum: '',
      pageSizeNow: '',
      channelList: []
    }
  },
  methods: {
    // 获取应用分类
    async getChannel() {
      try {
        const res = await appChannelGetlist()
        let channelObj = {}
        res.list.map(item => {
          channelObj = { ...channelObj, [item.channel]: item.name }
        })
        this.channelList = channelObj
      } catch (error) {
        console.log('error', error)
      }
    },
    //教程-列表
    listShop() {
      let fn = new FormData()
      fn.append('pageSize', this.pageSizeNow) //每页多少条
      fn.append('page', this.pageNum) //页数

      this.getChannel()

      this.$http.post(this.url + '/course_category/getList', fn).then(
        (res) => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            if (res.data.data.data) {
              this.shopList = res.data.data.data
              this.total = res.data.data.count
            } else {
              this.shopList = []
              this.total = 0
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: (action) => {
                window.location = 'login.html'
              },
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        (res) => {
          this.$message.error('网络错误！')
          return
        }
      )
    },
    // 搜索
    shearchBtn() {
      this.pageNum = 1
      this.listShop()
    },
    redactBtn(e) {
      this.ids = e.sn
      this.StateShowStop = true
      this.diaTitle = '温馨提示'
    },
    //执行删除
    addMenuBtn() {
      let fn = new FormData()
      fn.append('sn', this.ids) //删除分类的sn
      this.$http.post(this.url + '/course_category/disable', fn).then(
        (res) => {
          if (res.data.msg == '操作成功！' || res.data.code == '200') {
            this.$message.success(res.data.msg)
            this.hiddenRY()
            this.listShop()
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: (action) => {
                window.location = 'login.html'
              },
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        (res) => {
          this.$message.error('网络错误！')
          return
        }
      )

      //关闭弹框
      this.hiddenRY()
    },

    hiddenRY() {
      this.StateShowStop = false
    },

    //分页组件->子组件传值
    onChildValue(item) {
      this.pageNum = item[0]
      this.pageSizeNow = item[1]
      this.listShop()
    },
  },
  filters: {},
}
</script>

<style scoped>
.search_box {
  width: 790px;
}
.auditCentent .labels {
  min-height: 100px;
}
.auditCentent .labels .labels_label {
  float: left;
  cursor: pointer;
}
.check_label {
  background: var(--purple4);
  color: #fff;
  border: none;
}
.pdf {
  width: 860px;
  height: 600px;
}
@media (max-width: 767.78px) {
  .titleBox {
    height: 40px;
  }
}
</style>



// WEBPACK FOOTER //
// src/components/typelist/TypeList.vue